<template>
  <div class="position-test">
    <h2>position测试</h2>
    <p><strong>relative</strong></p>
    <div class="rela-box-wrap">
      <div class="rela-box">我是relative加了定位</div>
    </div>
    <div>我是被relative偏移后遮住的小可怜。</div>
    <p>测试可知，position: relative;的元素不会造成父级高度塌陷，父级高度为该元素的高度。且该元素设置偏移后，会浮在周围元素上面。</p>
    <p>注：所谓高度塌陷是指子元素为float或者position:absoute;时，父元素高度为0。对于float的情况，可以给父设置overflow:auto;使父级获得高度。</p>
    <p><strong>sticky</strong></p>
    <div class="sticky-box-wrap">
      <div class="sticky-box">我是sticky</div>
      <div>sticky设定left和top后没能遮住我，说明这里的top、left不是让元素偏移的。</div>
    </div>
    <p>sticky元素在一个可滚动的页面里，要滚到消失时，会变成fixed一样的浮在滚动的父级上，直到跟随他的父级一起滚动到消失。</p>
    <p>top与left的值在何处起作用不太好总结。</p>
    <p>简单来说，top为0，滚动到挨着元素顶部了，元素就开始变成fixed。假如为20px，距离元素顶部20px就开始变成fixed。</p>
    <p><strong>sticky失效的情况</strong></p>
    <p>top、left、right、bottom一个都不设置时。</p>
    <p>父级高低小于自身时。</p>
    <p>父级设置overflow:hidden或scroll时</p>
    <p>祖辈级设置overflow:hidden时</p>
    <p><strong>fixed</strong></p>
    <div class="fixed-box">我是fixed</div>
    <p>看看右下角的fixed元素，fixed是相对于浏览器来做的定位。</p>
    <p><strong>static</strong></p>
    <div>默认值，没有定位，设置left、top等不会起作用。</div>
  </div>
</template>

<script>
  export default {
    name: 'positiontest',
    components: {}
  };
</script>

<style lang="scss" scoped>
  .position-test {
    position: relative;
    .rela-box-wrap {
      background-color: #ff0099;
    }
    .rela-box {
      width: 120px;
      height: 120px;
      position: relative;
      background-color: #ff6600;
      top: 10px;
      left: 20px;
    }
    .fixed-box {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 120px;
      height: 40px;
      background-color: #ff6600;
    }
    .sticky-box-wrap {
      height: 140px;
      background-color: #ff0099;
    }
    .sticky-box {
      position: sticky;
      top: 10px;
      left: 0;
      width: 120px;
      height: 40px;
      background-color: #ff6600;
    }
  }
</style>


